<template>
  <div class="chart-box">
    <Pie :loading="loading" :chartData="chartData" title="成本分析" :rightBgWidth="0.2" />
  </div>
</template>

<script setup lang="ts">
  import { getPieChartChildListData } from '@/api/common/chart'
  import Pie from '@/components/Charts/Pie/index.vue'
  import { ref, watch } from 'vue'

  defineOptions({ name: 'CostPie' })

  const props = defineProps({
    dictCode: {
      type: String,
    },
    itemName: {
      type: String,
    },
    searchInfo: {
      type: Object,
      default: () => ({}),
    },
  })

  const chartData = ref()
  const loading = ref(false)
  const getChartData = (searchInfo) => {
    loading.value = true
    const { dictCode, itemName } = props
    getPieChartChildListData({
      ...searchInfo,
      dictCode,
      itemName,
      dataType: 1,
    })
      .then((res) => {
        chartData.value = res
      })
      .finally(() => {
        loading.value = false
      })
  }
  watch(
    () => props.searchInfo,
    (newValue) => {
      if (Object.values(newValue).length > 0) {
        getChartData(newValue)
      }
 
      
    },
    { immediate: false },
  )
</script>

<style scoped lang="scss">
</style>